<template>
<div class="mapStyle">
    <div class="mapItem vecMap" @click="showVec">
        <span class="name">矢量</span>
        <div class="Check">
            <el-checkbox-group v-model="vecCheckList" @change="check('vec')"  @click.stop>
                 <el-checkbox  label="注记" @click.stop/>
            </el-checkbox-group>
        </div>
    </div>
    <div class="mapItem ImgMap" @click="showImg" >
        <span class="name">影像</span>
        <div class="Check">
            <el-checkbox-group v-model="imgCheckList" @change="check('img')"  @click.stop>
            <el-checkbox label="路网" @click.stop/>
            <el-checkbox label="注记" @click.stop/>
           </el-checkbox-group>
        </div>
    </div>
    <div class="mapItem yunxuanMap"   @click="showYunxuan">
        <span class="name">晕渲</span>
        <div class="Check">
            <el-checkbox-group v-model="yunxuanCheckList"  @change="check('yunxuan')" @click.stop>
            <el-checkbox label="路网" @click.stop/>
            <el-checkbox label="注记" @click.stop/>
            </el-checkbox-group>
        </div>
    </div>

</div>
</template>

<script>
export default {
    name: 'ToolBar',
    data() {
        return {
            vecCheckList: ['注记'],
            imgCheckList: ['注记'],
            yunxuanCheckList: ['注记'],
            baseMAP:"img"
        }
    },
    mounted(){

    },
    methods: {
        showYunxuan() {
            this.baseMAP="yunxuan";
            this.$emit("changeBaseMap", "yunxuan");
        },
        showVec() {
                    this.baseMAP="vec";
            this.$emit("changeBaseMap", "vec");
        },
        showImg() {
                            this.baseMAP="img"; 
            this.$emit("changeBaseMap", "img");
        },
        // check(item,value){
        //      this.$emit("changeMapStyle",{item,value});
        // },
        check(item){
           switch (item) {
                case "vec":
                    this.$emit("changeMapStyle",{item:item,value:this.vecCheckList});
                    break;
                    case "img":
                    this.$emit("changeMapStyle",{item:item,value:this.imgCheckList});
                    break;
                    case "yunxuan":
                     this.$emit("changeMapStyle",{item:item,value:this.yunxuanCheckList});
                    break;
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.mapStyle {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 300px;
    height: 100px;
    z-index: 99;

    &:hover {
        .ImgMap {
            right: 160px;
        }

        .vecMap {
            right: 290px;
        }

        .Check {
            opacity: 1 !important;
        }
    }

    .mapItem {
        position: absolute;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        width: 122px;
        height: 72px;
        border-radius: 4px;
        border: 1px solid #dddddd;
        box-shadow: 0 4px 8px 1px #00000040;
        transition: all 0.5s ease;

        .Check {
            position: absolute;
            top: 0;
            width: 120px;
            height: 25px;
            background-color: rgb(0 0 0 / 56%);
            display: flex;
            justify-content: space-around;
            opacity: 0;
          
            ::v-deep .el-checkbox {
                height: 25px;
                border: none;
                margin: 0;
                --el-checkbox-input-border: none: !important;
                ;

                .el-checkbox__label {

                    color: #fff;
                }
            }
        }

        &:hover {
            .name {
                background-color: #20a0ff;
            }
        }

        .name {
            position: absolute;
            right: 0px;
            bottom: 0px;
            font-size: 12px;
            color: #fff;
            border-radius: 3px;
            background-color: #56565699;
        }
    }

    .yunxuanMap {
        background: url("../../assets/swicth/地形@2x.png") no-repeat 0 0 !important;
        background-size: contain !important;
        z-index: 9999;
    }

    .vecMap {
        background: url("../../assets/swicth/矢量@2x.png") no-repeat 0 0 !important;
        background-size: contain !important;
        z-index: 9999;
    }

    .ImgMap {
        background: url("../../assets/swicth/影像@2x.png") no-repeat 0 0 !important;
        background-size: contain !important;
        z-index: 9999;
    }
}
</style>
